<div class="blade-static __bottom" ng-if="blade.isSavingToParentObject" ng-include="'$(Platform)/Scripts/common/templates/ok-cancel2.tpl.html'"></div>
<div class="themeSettingsBlade themeSettingsBlade__blade-content">

    <legend class="themeSettingsBlade themeSettingsBlade__title">{{ blade.title }}</legend>

    <div class="themeSettingsBlade themeSettingsBlade__blade-inner">
        <div class="themeSettingsBlade themeSettingsBlade__inner-block">
            <form name="formScope" class="uploader uploader__form">
                <fieldset ng-init="setForm(formScope)">

                    <div class="uploader uploader__form-group">
                        <label class="uploader uploader__form-label">Choose new logo</label>
                            <div over-class="bd-blue" uploader="logoUploader" nv-file-over nv-file-drop class="uploader uploader__drag-area">
                                <input id="logoUploaderInput" ng-show="false" type="file" nv-file-select uploader="logoUploader" />
                                <div class="uploader uploader__drag-content">
                                    <div class="uploader uploader__icon-container"><i class="fas fa-cloud-upload-alt fa-2x"></i></div>
                                    <div class="uploader uploader__comment">
                                        {{ 'platform.blades.settings-uploader.drag-drop-comment' | translate }} <br>
                                        {{ 'platform.blades.settings-uploader.or' | translate }}
                                        <a href="#" ng-click="browseFiles('logoUploaderInput')">{{ 'platform.blades.settings-uploader.browse-your-files' | translate }}</a>
                                    </div>
                                </div>
                            </div>
                        <div class="uploader uploader__hint">Select image with min width 160px and min height 60px of the PNG, GIF or SVG format</div>
                    </div>

                </fieldset>
            </form>

            <div class="uploader uploader__pb-container" ng-if="logoUploader.isUploading">
                <div class="sub-t">Progress</div>
                <div class="progress-bar __aqua" ng-style="{'width': logoUploader.progress + '%'}"></div>
            </div>

            <!-- preview -->
            <div class="uploader-preview uploader-preview__container" ng-if="!logoUploader.isUploading">
                <div class="uploader-preview uploader-preview__sub-title">Preview</div>
                <div class="uploader-preview uploader-preview__tile uploader-preview__tile--centered uploader-preview__tile--relative">
                    <img class="uploader-preview uploader-preview__img--bg" ng-if="blade.currentEntity.background && blade.currentEntity.background.url" ng-src="{{ blade.currentEntity.background.url }}" alt="Login screen logo image background">
                    <img class="uploader-preview uploader-preview__img--absolute" ng-src="{{ blade.currentEntity.loginScreenLogo_custom.url || blade.currentEntity.loginScreenLogo_default.url }}" fallback-src="{{ blade.currentEntity.loginScreenLogo_default.url }}" alt="Login screen logo image preview">
                </div>
            </div>
        </div>
    </div>
</div>


